<template>
    <div class="profile-info">
        <div class="body row">
            <div class="item column" @click="toOtherPage">
                <div class="message icon">
                    <img
                        src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-09/yztkyq6n3e41t363hzm6f97hc9k037vj_.png"
                    />
                </div>
                <div class="text">
                    消息
                    <span v-if="notices.length">{{ notices.length }}</span>
                </div>
            </div>

            <div class="item column" @click="toLikedPage">
                <div class="view icon">
                    <img
                        src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-09/498zy02bcjbwdqh2ao3lkskyfv9tfq9d_.png"
                    />
                </div>
                <div class="text">点赞</div>
            </div>

            <div class="item column" @click="toHistoryPage">
                <div class="view icon">
                    <img
                        src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-09/emodrer0e6woixhto472n39fjrsad6yd_.png"
                    />
                </div>
                <div class="text">浏览</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        messages: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {};
    },
    computed: {
        notices() {
            return this.messages.filter(m => {
                return m.isRead === false;
            });
        }
    },

    methods: {
        toOtherPage() {
            this.$router.push({
                path: "/profile/message"
            });
        },
        toHistoryPage() {
            this.$router.push({
                path: "/profile/history"
            });
        },
        toLikedPage() {
            this.$router.push({
                path: "/profile/liked"
            });
        }
    }
};
</script>


<style lang="less" scoped>
.profile-info {
    background: #fff;
    padding: 30px 30px;
    margin-bottom: 20px;
    .body {
        background: linear-gradient(#eb8758, #ffc031);
        border-radius: 15px;
        padding: 40px 60px;
        justify-content: space-between;

        .item {
            color: #fff;
            text-align: center;
            font-weight: 600;
            justify-content: space-between;
            align-items: center;

            .icon {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80px;
                height: 80px;
                margin-bottom: 10px;
            }
            .text {
                font-size: 32px;
            }

            .message {
                width: 70px;
            }

            .view {
                width: 70px;
            }
        }
    }
}
</style>